<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div.bigbox{
            width: 520px;
            height: 280px;
            border: #FAA53B 3px solid;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        div.bigbox div.box{
            display: flex;
        }
        div.bigbox ul{
            position: absolute;
            bottom: 5%;
            left: 5%;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 120px;
            height: 15px;
            border-radius: 20px;
            background:rgba(0,0,0,.5);
        }
        div.bigbox ul li{
            display: flex;
            align-items: center;
        }

        div.box input{
            display: none;
        }
        div.box input:checked + a img{
            position: absolute;
            top: 0;
            left: 520px;
        }
        div.bigbox div.box{
            display: flex;
            animation-name: move;
            animation-duration: 18s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;
            animation-delay: 1.5s;
        }
        @keyframes move {
            0%{}
            25%{transform: translateX(-520px);}
            50%{transform: translateX(-1040px);}
            75%{transform: translateX(-1560px);}
            100%{transform: translateX(-2080px);}
        }
        div.bigbox ul li label{
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background:rgba(255,255,255,.3);
            animation-name: libgc;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            cursor: pointer;
        }

        div.bigbox ul li:nth-of-type(1) label{
            animation-delay: 0s;
        }
        div.bigbox ul li:nth-of-type(2) label{
            animation-delay: 6s;
        }
        div.bigbox ul li:nth-of-type(3) label{
            animation-delay: 12s;
        }
        div.bigbox ul li:nth-of-type(4) label{
            animation-delay: 18s;
        }
        div.bigbox ul li:nth-of-type(5) label{
            animation-delay: 24s;
        }
        @keyframes libgc {
            0%{
                background:rgba(255,255,255,.3);
                box-shadow: none;
            }
            5%{
                background-color: #fff;
                box-shadow: 0 0 10px #FFFFFF;
            }
            10%{
                background-color: #fff;
                box-shadow: 0 0 10px #FFFFFF;
            }
            20%{
                background:rgba(255,255,255,.3);
                box-shadow: none;
            }
        }
    </style>
</head>
<body>
<div class="bigbox">
    <div class="box">
        <input type="radio" name="lunbotu" id="li1" checked>
        <a href="#"><img src="img/1.jpg"></a>
        <input type="radio" name="lunbotu" id="li2">
        <a href="#"><img src="img/2.jpg"></a>
        <a href="#"><img src="img/3.jpg"></a>
        <input type="radio" name="lunbotu" id="li4">
        <a href="#"><img src="img/4.jpg"></a>
        <input type="radio" name="lunbotu" id="li5">
        <a href="#"><img src="img/5.jpg"></a>
        <input type="radio" name="lunbotu" id="li3">
        <a href="#"><img src="img/3.jpg"></a>
    </div>
    <ul>
        <li><label for="li1"></label></li>
        <li><label for="li2"></label></li>
        <li><label for="li3"></label></li>
        <li><label for="li4"></label></li>
        <li><label for="li5"></label></li>
    </ul>
</div>
</body>
</html>